<template>
	<div class="my-box">
		<HeaderCom></HeaderCom>
        <div class="user-info">
            <div class="logo">
                <img class="mine-head-img" :src="userInfo_tx + '?x-oss-process=image/resize,m_fixed,h_140,w_140'" />
            </div>
            <p class="name">{{nikename == null ? un : nikename}}</p>
        </div>
        <ul class="my-main">
            <li class="item" @click="historyRecord">
                <div class="item-left">
                    <Iconfont iconClass="jilu2" />
                    <span>历史记录</span>
                </div>
                <span class="item-right">
                    <Iconfont iconClass="youjiantou2" />
                </span>
            </li>
            <li class="item" @click="myOrder">
                <div class="item-left">
                    <i class="iconfont icon4-141" />
                    <span>我的预约</span>
                </div>
                <span class="item-right">
                    <Iconfont iconClass="youjiantou2" />
                </span>
            </li>
             <li class="item" @click="myFocus">
                <div class="item-left">
                    <Iconfont iconClass="wodeguanzhu" />
                    <span>我的关注</span>
                </div>
                <span class="item-right">
                    <Iconfont iconClass="youjiantou2" />
                </span>
            </li>
            <li class="item" @click="myCollect">
                <div class="item-left">
                    <Iconfont iconClass="xin" />
                    <span>我的收藏</span>
                </div>
                <span class="item-right">
                    <Iconfont iconClass="youjiantou2" />
                </span>
            </li>
        </ul>
	</div>
</template>

<script>
import  HeaderCom from './components/headerCom.vue'
		export default {
		components: {
			HeaderCom
		},
		data() {
			return {
				userInfo_tx: this.$store.state.userInfo.wxpic || imgTx,
                nikename: this.$store.state.userInfo.nickname || window.localStorage.getItem('userNickName'),
                un: this.$store.state.userInfo.un,
			}
		},
		computed: {

		},
		created() {
              this.$store.dispatch("showNav");
		},
		mounted: function() {
		},
		methods: {
            historyRecord(){
                this.$router.push(`/${this.$channel}/historyRecord`)
            },
            myOrder(){
                this.$router.push(`/${this.$channel}/myOrder`)
            },
            myFocus(){
                 this.$router.push(`/${this.$channel}/myFocus`)
            },
            myCollect(){
                 this.$router.push(`/${this.$channel}/myCollection`)
            }
		},
        watch: {
			// 用户信息
			"$store.state.userInfo" (newval, olval) {
				this.userInfo_tx = newval.wxpic;
				this.nikename = newval.nickname
				this.un = newval.un
			},
		}
	}
</script>


<style scoped="scoped">
	.my-box{
		width: 100vw;
		height: 100vh;
		background: white;
		
	}
    .my-box .header-com{
        border-bottom: none;
    }
    .user-info{
        height: 320px;
        width: 100%;
         display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 53px;
        background: url('../assets/images/mine-top-bg.png');
        background-size: 100% 100%;
    }
    .logo{
        height: 160px;
        width: 160px;
        margin-bottom: 20px;
    }
    .logo img{
        display: inline-block;
        height: 100%;
        width: 100%;
    }
    .name{
        font-size: 30px;
        color: #333333;
    }
    .my-main{
        padding: 30px;
    }
    .my-main .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 33px;
        padding-bottom: 17px;
        border-bottom:1px solid #EEEEEE;;
    }
    .item-left{
        display: flex;
        align-items: center;
    }
    .item-left .iconfont{
        color: #E8340A;
        font-size: 40px;
        margin-right: 28px;
    }
     .item-left span{
         font-size: 32px;
        font-weight: 400;
        color: #333333;
        line-height: 45px;
     }
     .item-right .iconfont{
         color: #999999!important;
         font-size: 32px;
     }
</style>